<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Infinite Scroll - Standalone</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/core.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-content id="content">
      <ion-list id="list"> </ion-list>

      <ion-infinite-scroll threshold="100px" id="infinite-scroll">
        <ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-content>

    <script>
      let items = [];
      for (var i = 0; i < 30; i++) {
        items.push(i + 1);
      }
      const list = document.getElementById('list');
      const infiniteScroll = document.getElementById('infinite-scroll');

      infiniteScroll.addEventListener('ionInfinite', async function () {
        console.log('Loading data...');
        const data = await getAsyncData();
        items = items.concat(data);
        infiniteScroll.complete();
        render();
        console.log('Done');
      });

      function render() {
        let html = '';
        for (let item of items) {
          html += `<ion-item>${item}</ion-item>`;
        }
        list.innerHTML = html;
      }

      function getAsyncData() {
        // async return mock data
        return new Promise((resolve) => {
          setTimeout(() => {
            let data = [];
            for (var i = 0; i < 30; i++) {
              data.push(i);
            }

            resolve(data);
          }, 500);
        });
      }
      render();
    </script>
  </body>
</html>
